.trR(@d){
	-webkit-transform:rotate(@d);
	-moz-transform:rotate(@d);
	transform:rotate(@d);
}

.an(@a1){
	-webkit-animation:@a1;
	-moz-animation:@a1;
	animation:@a1;
}

body{
	margin:0;
	padding:0;
	background:#000;
}

[class^="container-"]{
	position:absolute;
	top:50%;
	left:50%;
	display:inline-block;
	width:1px;
	height:1px;
	div{
		position:absolute;
		width:1px;
		height:1px;
		&:after,&:before{
			content:'';
			position:absolute;
			width:0;
			height:0;
		}
		&:after{
			border-left:solid 60px;
			border-top:solid 4px transparent;
			border-bottom:solid 4px transparent;
			right:-25px;
			top:-60px;
		}
		&:before{
			border-right:solid 60px;
			border-top:solid 4px transparent;
			border-bottom:solid 4px transparent;
			left:-25px;
			top:60px;
		}
	}
}

.container-1{
	.an(rot3 1.5s 0s linear infinite);
	div:after{
		border-left-color:white;
		.an(rot2 2s 0s infinite);
	}
	div:before{
		border-right-color:white;
		.an(rot1 2s 0s infinite);
	}
}
.container-2{
	.an(rot3 1s 0s linear infinite);
	div:after{
		border-left-color:red;
		.an(rot2 4s 0s infinite);
	}
	div:before{
		border-right-color:red;
		.an(rot1 4s 0s infinite);
	}
}
.container-3{
	.an(rot3 2s 0s linear infinite);
	div:after{
		border-left-color:green;
		.an(rot2 3s 0s infinite);
	}
	div:before{
		border-right-color:green;
		.an(rot1 3s 0s infinite);
	}
}
.container-4{
	.an(rot3 1.8s 0s linear infinite);
	div:after{
		border-left-color:blue;
		.an(rot2 3s 0s infinite);
	}
	div:before{
		border-right-color:blue;
		.an(rot1 3s 0s infinite);
	}
}

.vert{
	.trR(90deg);
}
.diag-1{
	.trR(45deg);
}
.diag-2{
	.trR(135deg);
}

@-webkit-keyframes rot1{
	0%,100%{left:0;top:-3px;}
	50%{left:-60px;top:-2px;opacity:.5}
}
@-webkit-keyframes rot2{
	0%,100%{right:0;top:-3px;}
	50%{right:-60px;top:-2px;opacity:.5}
}
@-webkit-keyframes rot3{
	0%{.trR(0deg)}
	100%{.trR(-360deg)}
}
@-moz-keyframes rot1{
	0%,100%{left:0;top:-3px;}
	50%{left:-60px;top:-2px;opacity:.5}
}
@-moz-keyframes rot2{
	0%,100%{right:0;top:-3px;}
	50%{right:-60px;top:-2px;opacity:.5}
}
@-moz-keyframes rot3{
	0%{.trR(0deg)}
	100%{.trR(-360deg)}
}
@keyframes rot1{
	0%,100%{left:0;top:-3px;}
	50%{left:-60px;top:-2px;opacity:.5}
}
@keyframes rot2{
	0%,100%{right:0;top:-3px;}
	50%{right:-60px;top:-2px;opacity:.5}
}
@keyframes rot3{
	0%{.trR(0deg)}
	100%{.trR(-360deg)}
}